<template>
    <div id="main" class="main-container">
        <div class="tab-container">
            <el-tabs
                type="card"
                class="tabs"
                editable
                :closable="true"
                >
                <el-tab-pane
                    v-for="item in tabValues"
                    :key="item.name"
                    :label="item.title"
                    :name="item.name"
                    :closable="true">
                    <template #label>
                        <i class="icon"></i>
                        <span class="tabs-item" :class="item.closable == false ? 'no-close' : ''">{{item.name}}</span>
                    </template>
                </el-tab-pane>
                <el-tab-pane>
                    <template #label>
                    <span>
                        <el-link type="primary" :underline="false">刷新</el-link>
                    </span>
                </template>
                </el-tab-pane>
                <el-dropdown
                    class="tabs-tools"
                    :show-timeout="20"
                    trigger="hover">
                    <div style="font-size:20px;width:50px;"><span style="width:12px; height:12px;" class="el-icon-arrow-down">
                      <el-icon><ArrowDown /></el-icon>
                    </span></div>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item>关闭当前标签></el-dropdown-item>
                        <el-dropdown-item>关闭其它标签></el-dropdown-item>
                        <el-dropdown-item>关闭全部标签</el-dropdown-item>
                    </el-dropdown-menu>
                    </template>

                </el-dropdown>
            </el-tabs>
        </div>
        <div class="main-content">
            <div>{{count}}</div>
            <router-view></router-view>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    data() {
        return {
            tabValues :[
                {
                title:"首页",
                name: "Index",
                content: "首页",
                closable: false
                },
                {
                title:"其他页1",
                name: "Two",
                content: "Content Two",
                closable: false
                },
                {
                title:"其他页2",
                name: "Three2",
                content: "Content Three",
                closable: true
                },
                {
                title:"其他页2",
                name: "Three3",
                content: "Content Three",
                closable: true
                },
                {
                title:"其他页2",
                name: "Three",
                content: "Content Three",
                closable: true
                },
                {
                title:"其他页2",
                name: "Three4",
                content: "Content Three",
                closable: true
                }
            ],
            count: 1,
        }
    },
    methods: {
        
    },
    computed: {
    },
    mounted() {
        console.log("MainContent mounted...");
    },
})
</script>
<style scoped>
.main-container {
  background: #f2f2f2;
  height: 100%;
}

.tabs-item {
  font-size: 12px;
}

.tabs {
  z-index: 1020;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  background: rgb(255, 253, 255);
  border-color: rgba(200, 206, 206, 0.5);
  border-bottom-width: 0px;
  border-bottom-style: solid;
}
.tabs-tools {
  position: fixed;
  top: 42px;
  right: 0;
  z-index: 1020;
  height: 38px;
  font-size: 14px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  border-color: rgba(200, 206, 206, 0.5);
  border-left-width: 1px;
  border-left-style: solid;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-top-width: 1px;
  border-top-style: solid;
  background: rgba(255, 255, 255, 1);
}

.tabs-tools:hover {
  background: #f6f6f6;
}

.main-container >>> .el-tabs__item i {
  background: #f6f6f6;
}

.el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
    border-bottom: solid 0px !important;
}

::v-deep .el-tabs__item {
    border-bottom: solid 0px #fff !important;
}
  
.el-tabs__nav .el-tabs__item span.is-icon-close {
  display: inline;
}

/deep/ .no-close+.is-icon-close {
  display: none !important;
}
  
/deep/ .el-tabs--card>.el-tabs__header .el-tabs__item .is-icon-close {
  font-size: 12px ;
  width: 14px !important;
  height: 14px;
}

.el-tabs--card>.el-tabs__header .el-tabs__item .el-tabs__item {
  width: 14px !important;
}

.icon {
  display: inline-block;
  width: 10px;
  height:10px;
  border-radius:50%;
  margin-right:4px;
}

.main-container >>> .el-tabs__item.is-active .icon {
  background: #1e9fff;
}
</style>
